<!-- 采购管理-供应商管理-基础设置 -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div style="padding: 20px 30px">
      <a-space :size="30" direction="vertical" fill>
        <div class="operater">
          <a-space>
            <a-button type="primary" @click="goaddproject()"
              >新建认证项目</a-button
            >
            <a-button type="primary" @click="goaddprocess()"
              >新建认证流程</a-button
            >
          </a-space>
        </div>
        <div>
          <a-space direction="vertical" fill>
            <div>
              <div class="Account_item">
                <a-space style="padding: 25px">
                  <div
                    style="
                      width: 4px;
                      height: 18px;
                      background: inherit;
                      background-color: rgba(61, 126, 255, 1);
                      border: none;
                      border-radius: 1px;
                    "
                  ></div>
                  <div>认证项目</div>
                </a-space>
              </div>
            </div>
            <div>
              <a-table
                :columns="projectcolumns"
                :pagination="false"
                :data="projectData"
              >
                <template #handle="{ record }"
                  ><a-button type="text" @click="editProject(record)"
                    >编辑</a-button
                  ><a-button
                    type="text"
                    status="danger"
                    @click="deleteProject(record.id)"
                    >删除</a-button
                  >
                </template>
              </a-table>
            </div>
          </a-space>
        </div>

        <div>
          <a-space direction="vertical" fill>
            <div>
              <div class="Account_item">
                <a-space style="padding: 25px">
                  <div
                    style="
                      width: 4px;
                      height: 18px;
                      background: inherit;
                      background-color: rgba(61, 126, 255, 1);
                      border: none;
                      border-radius: 1px;
                    "
                  ></div>
                  <div>供应商认证流程 </div>
                </a-space>
              </div>
            </div>
            <div>
              <a-table :columns="processcolumns" :data="processData">
                <template #handle="{ record }"
                  ><a-button
                    type="text"
                    status="danger"
                    @click="editprocess(record)"
                    >编辑</a-button
                  ><a-button
                    type="text"
                    status="danger"
                    @click="deleteProcess(record.id)"
                    >删除</a-button
                  >
                </template>
              </a-table>
            </div>
          </a-space>
        </div>
      </a-space>
    </div>
    <Addproject
      v-model:visible="projectvisible"
      :title="projecttitle"
      @addProject="addProject"
    ></Addproject>
    <Addprocess
      v-model:visible="processvisible"
      :title="processtitle"
      :formList="formData"
      @addprocess="addprocess"
    ></Addprocess>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { number } from 'echarts';
  import {
    getSupplierauth,
    postSupplierauth,
    putSupplierauth,
    delSupplierauth,
  } from '@/api/buy-management/supplier-management/base-setting/index';
  import Addproject from './components/add-aunt-project/index.vue';
  import Addprocess from './components/add-aunt-process/index.vue';

  const title: string = '供应商认证项目设置';
  const breadCrumb: string[] = [
    '采购管理',
    '供应商管理',
    '基础设置',
    '供应商认证项目设置',
  ];
  const router = useRouter();
  const Data = ref();
  const processData = ref();
  const projectData = ref();
  const projectvisible = ref(false);
  const processvisible = ref(false);
  const projecttitle = ref();
  const processtitle = ref();
  const formData = ref({
    Name: '',
    Des: '',
    id: '',
  });

  //  获取所有认证数据
  const GetAuthData = async () => {
    const res = await getSupplierauth();
    processData.value = res.flowAuth;
    projectData.value = res.projectAuth;
  };
  GetAuthData();

  const processcolumns = [
    {
      id: 1,
      title: '认证流程名称',
      visible: true,
      type: 'string',
      dataIndex: 'name',
    },
    {
      id: 2,
      title: '流程内容',
      visible: true,
      type: 'string',
      dataIndex: 'chineseDescription',
    },
    {
      id: 3,
      title: '操作',
      visible: true,
      type: 'string',
      slotName: 'handle',
    },
  ];

  const projectcolumns = [
    {
      id: 1,
      title: '认证项目名称',
      visible: true,
      type: 'string',
      dataIndex: 'name',
    },
    {
      id: 2,
      title: '项目描述',
      visible: true,
      type: 'string',
      dataIndex: 'description',
    },
  ];

  const goaddproject = () => {
    projecttitle.value = '新增项目认证';
    projectvisible.value = true;
  };

  const addProject = async (formData) => {
    await postSupplierauth({
      authType: 1,
      name: formData.Name,
      description: formData.Des,
    });
    GetAuthData();
  };

  const deleteProject = async (id) => {
    await delSupplierauth({ id });
    GetAuthData();
  };

  const editProject = (val) => {
    router.push({
      name: 'AuthProcess',
      query: val,
    });
    // form.value.Name = val.name;
    // form.value.Des = val.description;
    // form.value.id = val.id;
    // projecttitle.value = '编辑项目认证';
    // projectvisible.value = true;
  };

  const editprocess = (val) => {
    formData.value.Name = val.name;
    formData.value.Des = val.chineseDescription;
    formData.value.id = val.id;
    processtitle.value = '编辑认证流程';
    processvisible.value = true;
  };

  const goaddprocess = () => {
    formData.value = {
      Name: '',
      Des: '',
      id: '',
    };
    processtitle.value = '新增认证流程';
    processvisible.value = true;
  };

  const addprocess = async (formData, key) => {
    if (key === 'add') {
      await postSupplierauth({
        authType: 2,
        name: formData.name,
        description: formData.description,
      });
    } else {
      await putSupplierauth({
        id: formData.id,
        authType: 2,
        name: formData.name,
        description: formData.description,
      });
    }
    GetAuthData();
  };

  const deleteProcess = async (id) => {
    await delSupplierauth({ id, authType: 2 });
    GetAuthData();
  };
</script>

<style scoped lang="less">
  .Account_item {
    height: 60px;
    background-color: rgba(245, 247, 250, 1);
    line-height: 60px;
    display: flex;
  }
</style>
